<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
	</head>
	<body>
		<h4>商品列表</h4>
		<hr>
		<!-- table>(thead>tr>th*4)+tbody>tr>td -->
		<table border="1" width="100%">
			<thead>
				<tr>
					<th>编号</th>
					<th>名称</th>
					<th>单价</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody id="tbody">
				<tr>
					<td id="productList" colspan="4" align="center">点击下方按钮以加载数据</td>
				</tr>
			</tbody>
		</table>
		<br>
		
		<button id="loadData">加载商品数据</button>   
		&nbsp;&nbsp;&nbsp;
		<select id="choosePageSize">
			<option value="5">每页显示5条记录</option>
			<option value="10" selected>每页显示10条记录</option>
			<option value="20">每页显示20条记录</option>
			<option value="40">每页显示40条记录</option>
			<option value="60">每页显示60条记录</option>
		</select>
		
		<script>
		//为“加载数据”按钮的单击事件指定处理方法
		loadData.onclick = function(){
			//发起异步请求，获取服务器端接口提供的数据
			//1创建异步请求对象
			let xhr = new XMLHttpRequest()
			//2打开到服务器的连接
			//xhr.open('GET', 'http://127.0.0.1:8080/v2/product/list')
			xhr.open('GET', '/v2/product/list')
			//3提前准备好：如果加载到了响应数据，该如何处理
			xhr.onload = function(){
				//把响应消息中主体数据放置到表格中
				productList.innerHTML = xhr.responseText
			}
			//4正式的向服务器发出请求消息
			xhr.send()
		}
		
		//为“选择每页显示的条数”下拉菜单的“选项改变事件”指定处理方法			
		choosePageSize.onchange = function(){
			//读取下拉菜单当前选中的option的value
			let ps = choosePageSize.value
			
			//1创建对象
			let xhr = new XMLHttpRequest()
			//2打开连接
			xhr.open('GET', '/v2/product/list?pageSize=' + ps)
			//3准备处理
			xhr.onload = function(){
				//productList.innerHTML = xhr.responseText
				//console.log( typeof(xhr.responseText) )		//string
				//console.log( xhr.responseText[0].price )	//undefined
				///////此次需要对服务器端返回的JSON字符串进行反序列化//////
				let data = JSON.parse(xhr.responseText)
				//console.log( typeof(data) )		//object
				//console.log(data)					//数组
				let html = `
				  <tr>
					<td>${data[0].lid}</td>
					<td>${data[0].title}</td>
					<td>${data[0].price}</td>
					<td><a href="#" onclick="deleteProduct(${data[0].lid})">删除</a></td>
				  </tr>
				`
				tbody.innerHTML = html
			}
			//4发起请求
			xhr.send()
		}
		
		
		function deleteProduct(lid){
			console.log('即将删除商品：', lid)
			//1
			//2
			//3
			//4
		}
		</script>
	</body>
</html>
